import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { EmptyComponent } from './empty.component';
import { EmptyModule } from './empty.module';

@Component({
  template: `
    <lv-empty #emptyComponent [lvImage]="lvImage" [lvDescription]="lvDescription" [lvImageClass]="lvImageClass"></lv-empty>
    ,
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
class TestEmptyBasicComponent {
  @ViewChild('emptyComponent', { static: true }) emptyComponent: EmptyComponent;
  @Input() lvImage: EmptyComponent['lvImage'];
  @Input() lvDescription: EmptyComponent['lvDescription'];
  @Input() lvImageClass: string;
}

describe('EmptyComponent', () => {
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [EmptyComponent, TestEmptyBasicComponent],
      imports: [EmptyModule],
    }).compileComponents();
  }));

  describe('empty renders correctly', () => {
    // empty 自定义图案及默认图案渲染（覆盖description参数）
    it('with image and description', () => {
      const fixture = TestBed.createComponent(EmptyComponent);
      expect(fixture).toMatchSnapshot();
    });
  });

  describe('empty works correctly', () => {
    let component: TestEmptyBasicComponent;
    let fixture: ComponentFixture<TestEmptyBasicComponent>;

    beforeEach(() => {
      fixture = TestBed.createComponent(TestEmptyBasicComponent);
      component = fixture.componentInstance;
      component.lvImage = 'lv-icon-no-data';
      component.lvDescription = 'empty data';
      component.lvImageClass = '';
    });

    // 自定义描述
    it('with custom description', () => {
      component.lvDescription = 'custom description';
      fixture.detectChanges();
      expect(fixture.debugElement.nativeElement.textContent).toContain('custom description');
    });

    // 传入的ClassName作为额外类名添加到元素上
    it('with className', () => {
      component.lvImageClass = 'custom-class';
      fixture.detectChanges();
      expect(fixture.debugElement.query(By.css(`.custom-class`))).toBeTruthy();
    });
  });
});
